<!DOCTYPE html>
<html>

<head>
    <title>产品</title>
    <% include layout/lib.ejs %>
    <link rel="stylesheet" type="text/css" href="/css/product.css" />

</head>

<body>
    <div id="app">

        <% include layout/header.ejs %>

        <div class="bannerBox">
            <div class="bannerItem" style="background-image:url('/image/ed-8.jpg');"></div>
        </div>

        <div class="productBox">
            <div class="productMain">
                <div class="globalTitleBox">
                    <div class="globalTitleIcon">
                        <img src="/image/ed-18.png" />
                    </div>
                    <div class="globalTitle">产品介绍</div>
                </div>
                <div class="productCategory"><i class="fa fa-thumb-tack fa-lg"></i> Easy-D集合开发框架介绍<span class="playVideo"
                        data-url="https://e-d.oss-cn-beijing.aliyuncs.com/video/%E5%B8%A6%E6%82%A8%E4%BA%86%E8%A7%A3%E4%BB%80%E4%B9%88easy-D%E9%9B%86%E5%90%88%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6.mp4" style="float:right;cursor:pointer;"><i
                            style="font-size:18px;position:relative;top:-1px;" class="fa fa-play-circle-o fa-lg"></i>
                        查看视频介绍</span></div>
                <div class="productContent">
                    <div class="productContentItem" style="height:auto;">
                        <div class="productContentItemDesc" style="border:none;margin:0px;padding:0px;">
                            Easy-D集合开发框架，是一套开发框架的集合（非一个框架），既包含后台接口层的开发，也包含前端视图层的开发，
                            和传统的开发框架不同，Easy-D集合开发框架提倡在项目开发中，将项目从物理上拆分开来，各个层负责各个层的任务，
                            最终将各层组合后完成一个标准的项目，有点类似于微服务的思想（还没有微服务完善，未来会向这个领域发展），
                            由于传统的开发框架在分层中都是以代码逻辑进行分层，导致其实虽然在逻辑上有所区分，
                            但是各个功能模块其实还是在一个项目之中，随着项目代码越来越庞大，也会变得很难进行维护和管理，不利于开发标准化的产品级项目，
                            Easy-D集合框架将各个功能划分到各个服务之中，每个服务处理自己的任务即可，让项目的层次逻辑更加清晰明确，非常适合公司技术团队进行使用，
                            来开发公司的产品，物理分层也有对应的坏处，会导致运维成本有所提升（不过，这个只是相对于单框架开发而已），我们来看一张图：
                            <p style="border:1px solid #eee;margin-top:10px;margin-bottom:10px;"><img src="/image/ed-17.png"
                                    style="width:100%;height:auto;" /></p>
                            上图中，表示了一个使用Easy-D集合框架开发项目的标准化流程，我们在视图层（例如微信端），使用Easy-D微信端端开发框架，在数据层中我们将数据层分为原子层（基本数据处理）和聚合层（具体业务处理），分别使用Easy-D聚合层开发框架和Easy-D原子层开发框架实现，这样以后
                            我们从物理的角度上将项目分为了三个基本层，分别为 视图层，聚合层，原子层
                            将项目的结构划分的更加清晰，如果有别的需求，比如我们需要开发一个即时通讯服务，可以使用Easy-D即时通讯开发框架，开发即时通讯层，和其他各个层进行项目整合即可，这是Easy-D集合开发框架的开发思想，摒弃传统的单结构，单项目的结构，物理分层的另一个好处是便于横向扩展，如果我们在已经有微信端的情况下，现在需要开发一套新的业务接口服务（比如APP端），但是又不想影响到以前的微信端，这样
                            我们只需要重新在使用Easy-D聚合层框架开发一套APP用的接口服务即可，可以针对各个业务开发自己的服务。
                        </div>
                    </div>
                </div>
                <div class="productCategory" style="margin-top:40px;"><i class="fa fa-thumb-tack fa-lg"></i> 开发相关产品</div>
                <div class="productContent">
                    <div class="productContentItem">
                        <div class="productContentItemTitle"><img src="/image/ed-23.png" style="margin-left:-5px;" /><b>Easy-D
                                原子层开发框架</b><a href="/download"><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span></a>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            原子层开发框架，是以PHP为核心语言而开发的基本数据处理层接口服务框架，主要提供了数据库数据操作，接口路由声明，接口缓存操作，聚合层服务器验证，接口自动构建等功能，致力于成为接口的快速开发框架
                        </div>
                    </div>
                    <div class="productContentItem">
                        <div class="productContentItemTitle"><img src="/image/ed-27.png" style="width:25px;" /><b>Easy-D
                                聚合层开发框架</b><a href="/download"><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span></a>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            原聚合层开发框架，是以Nodejs为核心的业务拼接层框架，提供了原子层接口访问的一些基本能力，并提供聚合层接口的快速声明创建方式，并通过JS异步并发的特性，来进行业务的快速生成服务，可以很快捷进行多个服务的横向扩展
                        </div>
                    </div>
                    <div class="productContentItem">
                        <div class="productContentItemTitle"><img src="/image/ed-20.png" style="width:30px;margin-top:0px;" /><b>Easy-D
                                后台管理端框架</b><a href="/download"><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span></a>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            后台管理端框架，以webpack+vue+UI库
                            为核心，构建了一个后台管理系统的标准开发框架，并提供了管理端的一些基础开发管理功能，例如：API文档管理，权限管理，公司组织架构管理等基本特性，并对前端项目进行了结构目录的优化，能够快速让开发者进入具体后台业务的开发工作
                        </div>
                    </div>
                    <div class="productContentItem" style="background:#f9f9f9;border:1px solid #e0e0e0;color:#999;">
                        <div class="productContentItemTitle"><img src="/image/ed-44.png" style="width:30px;margin-top:-5px;" /><b>Easy-D
                                服务开发框架<em style="color:red;font-style:normal;">（正在努力优化...）</em></b><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            服务层开发框架，专门为开发独立三方服务建立的快速开发框架，是聚合层框架的精简版本，可以进行诸如，文件服务，短信服务，推送服务，支付服务等独立服务的开发，可以快速接入项目进行使用，并提供了文档管理工具
                        </div>
                    </div>
                    <div class="productContentItem" style="background:#f9f9f9;border:1px solid #e0e0e0;color:#999;">
                        <div class="productContentItemTitle"><img src="/image/ed-29.png" style="width:30px;margin-top:-5px;" /><b>Easy-D
                                PC端开发框架<em style="color:red;font-style:normal;">（正在努力优化...）</em></b><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            PC端开发框架，以Nodejs为核心，搭建一个PC端项目开发的快捷框架，并对在PC开发中的一些常用库，组件进行了封装，可以直接进行调用，使开发者快速进入开发工作
                        </div>
                    </div>
                    <div class="productContentItem" style="background:#f9f9f9;border:1px solid #e0e0e0;color:#999;">
                        <div class="productContentItemTitle"><img src="/image/ed-32.png" style="width:30px;margin-top:-5px;color:#999;" /><b>Easy-D
                                微信端开发框架<em style="color:red;font-style:normal;">（正在努力优化...）</em></b><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            PC微信端开发框架，webpack+vue为核心，搭建了标准的单页面应用App框架，并对在微信开发中的一些常用库，组件进行了封装，可以直接进行调用，使开发者快速进入开发工作
                        </div>
                    </div>
                </div>

                <div class="productCategory" style="margin-top:40px;"><i class="fa fa-thumb-tack fa-lg"></i> 服务相关产品</div>
                <div class="productContent">
                    <div class="productContentItem">
                        <div class="productContentItemTitle"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/product/wenjianfuwu.png" style="margin-left:-5px;" /><b>Easy-D
                                文件OSS服务</b><a href="/download"><span><i class="fa fa-download fa-lg"></i>
                                点击下载</span></a>
                                <!-- <span class="playVideo" data-url="#"><i
                                    class="fa fa-play-circle-o fa-lg"></i> 视频介绍</span> -->
                                </div>
                        <div class="productContentItemDesc">
                            Easy-D
                            文件服务，使用Easy-D服务开发框架开发的文件管理服务器，可以让您轻松进行文件上传，图片水印，缩略图，裁切等处理，为您提供成套的文件上传以及处理接口，启动安装后可作为文件服务器进行使用，管理您在项目中的文件相关内容.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <% include layout/footer.ejs %>

    </div>

    <!-- 视频框 -->
    <div class="popVideoPlayBox">
        <div class="popVideoPlayContent">
            <video id="my-video" class="video-js vjs-big-play-centered" controls style="width:100%;height:100%;">
                <source id="video_source" src="https://artmofangtest.oss-cn-beijing.aliyuncs.com/20181220_211607.mp4"
                    type="video/mp4">
                <p class="vjs-no-js">
                    要查看此视频，请启用JavaScript，并考虑升级到一个网页浏览器
                    <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                </p>=
            </video>
        </div>
        <div class="popVideoPlayClose"><i class="fa fa-close fa-lg"></i></div>
    </div>

</body>
<script>

    $(".playVideo").click(function () {

        var videoUrl = $(this).data("url");

        if(videoUrl == '#'){
            POP.info("提示信息","视频正在录制，敬请期待");
            return;
        }

        var nowScrollTop = $(document).scrollTop();
        $(".popVideoPlayBox").css("top", nowScrollTop);
        $(".popVideoPlayBox").fadeIn(300);
        $(document).on('scroll.unable', function (e) {
            $(document).scrollTop(nowScrollTop);
        })
        $("#video_source").attr("src", videoUrl);
        $("#my-video").get(0).load();

    });

    $(".popVideoPlayClose").click(function () {
        $(".popVideoPlayBox").hide();
        $(document).unbind("scroll.unable");
    });
</script>

</html>